<template>
  <div v-if="data">
    <!-- 前端工程师 -->
    <div class="header" v-for="n in data.datatwo" :key="n.did">
      <div class="h-heade" v-if="jobdata">
        <div class="wz">{{ jobdata.data[0].jname }}</div>
        <div class="tp">
          <i class="i1"></i>
          <div class="a1"></div>
        </div>
      </div>
      <div class="time">
        <span class="t1">{{ n.dtime }}</span>
      </div>
      <div class="jobmessage">
        <span class="s1">{{ n.demand }}</span>
        <span class="s2">{{ n.dname1 }}</span>
        <span class="s2">{{ n.dname2 }}</span>
        <span class="s4">{{ n.dname3 }}</span>
        <span class="s5">{{ n.dname4 }}</span>
        <span class="s6">{{ n.dname5 }}</span>
      </div>
      <div class="h-foot">
        <div class="f-left">
          <span class="f1">{{ n.dwelfare }}</span>
          <span class="f2">{{ n.dwelfare1 }}</span>
          <span class="f3">{{ n.dwelfare2 }}</span>
          <span class="f2">{{ n.dwelfare3 }} </span
          ><span class="f3">{{ n.dwelfare4 }}</span>
        </div>
        <div class="f-right">
          <div class="r1" @click="show = !show">
            <span class="s1"></span>
            <span class="s2" v-show="!show"></span>
          </div>
          <div class="r2">投个简历</div>
        </div>
      </div>
    </div>
    <!-- 职位描述 -->
    <div class="con-job">
      <div class="j-left" v-for="x in data.dataone" :key="x.jid">
        <div class="miaoshu">职位描述：</div>
        <div class="all" v-html="x.j_subtitle1">
          <!-- <p>【岗位职责】</p>
          <p>1，独立开发小程序经验</p>
          <p>2，小程序云开发经验</p>
          <p>3，最好有IM系统经验</p>
          <p>4，上述条件必须满足2条（因为是开发社交类小程序）</p>
          <p>【任职要求】</p>
          <p>1，对数据结构和算法设计有一定程度的理解</p>
          <p>2，具备良好的逻辑思维能力</p>
          <p>3，对数据敏感，能够发现关键数据、抓住核心问题</p>
          <p>4，具备独立思考和独立工作的能力。</p>
          <p>5，逻辑分析能力，能发现问题并解决问题</p>
          <p>6，扎实的计算机基础知识</p>
          <p>7，对iOS/Android平台有一定的了解，对手机软件开发感兴趣</p>
          <p>【你将获得】</p>
          <p>1，如果表现好，技术过硬，可给予适量期权。</p>
          <p>2，如果价值观与团队吻合，追求一致，各方面满足彼此，可考虑转正</p>
          <p>3，根据情况给予一定的奖金。</p>
          <p>4，你将获得经验，收获朋友。</p>
          <p>5，我们不仅是一家企业，也是一个学校，培养人是我们的一个目标。</p> -->
        </div>
      </div>
      <div class="j-right" v-for="(b, i) in data.data" :key="i">
        <div class="r-top">公司简介</div>
        <div class="r-bottom">
          <div class="com_intro" v-if="jobdata">
            <a href="#">
              <!-- <img :src="imgBase + jobdata.data[0].jimg" alt="" />-->
              <el-image
                class="el-image__inner"
                :src="imgBase + jobdata.data[0].jimg"
                lazy
              ></el-image>
            </a>
            <a class="com-name" href="#">{{ jobdata.data[0].jtitle }}</a>
            <div class="com-desc">{{ b.c_introduce }}</div>
          </div>
          <div class="com-tag">
            <div>{{ b.c_merit1 }}</div>
            <div>{{ b.c_merit2 }}</div>
            <div>{{ b.c_merit3 }}</div>
            <div>{{ b.c_merit4 }}</div>
            <div>{{ b.c_merit5 }}</div>
            <div>{{ b.c_merit6 }}</div>
          </div>
          <div class="com-detail">
            <div class="d1">
              <i class="i4"></i>
              {{ b.c_type }}
            </div>
            <div class="d1">
              <i class="i5"></i>
              {{ b.c_xingzhi }}
            </div>
            <div class="d1">
              <i class="i6"></i>
              {{ b.c_number }}
            </div>
            <div class="d1">
              <i class="i7"></i>
              {{ b.c_address }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 投递要求 -->
    <div class="con-req" v-for="(c, i) in data.dataone" :key="i">
      <div class="job-til">投递要求</div>
      <div class="job-req">{{ c.j_need }}</div>
      <div class="cutom-time">{{ c.j_date }}</div>
    </div>
    <!-- 工作地点 -->
    <div class="job-city" v-for="c in data.dataone" :key="c.j_address">
      <div class="til">工作地点：</div>
      <span class="com-position"> {{ c.j_address }}</span>
      <div class="com-map" @click="showMap = !showMap">
        <span class="c1" v-show="showMap">收起地图</span>
        <span class="c2" v-show="!showMap">展开地图</span>
      </div>

      <!-- 插入地图 -->
      <div class="insert-map" id="container" v-show="showMap"></div>
    </div>
    <!-- 投个简历 -->
    <div class="jl">
      <div class="j1">投个简历</div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import AMapLoader from "@amap/amap-jsapi-loader";
import Vue from "vue";
window._AMapSecurityConfig = {
  securityJsCode: "8d9ce15f20501c7ded783bcdf9a2c096", //引入安全密钥
};
export default {
  props: ["jid"],
  computed: {
    ...mapState(["imgBase"]),
  },
  data() {
    return {
      show: true,
      showMap: true,
      data: null,
      map: null,
      lat: 105,
      lng: 30,
      jobdata: null,
    };
  },
  mounted() {
    // console.log("$router", this.$router);
    //DOM初始化完成进行地图初始化
    // this.sx();
    this.companyintro();
    this.getJobdata();
    this.initMap();
  },
  methods: {
    initMap() {
      setTimeout(() => {
        AMapLoader.load({
          key: "203e68d7a9dc52bd8a5c1a82f110661a", // 引入key
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [
            "AMap.ToolBar",
            "AMap.Scale",
            "AMap.HawkEye",
            "AMap.MapType",
            "AMap.Geolocation",
          ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
          .catch((e) => {
            // console.log("e", e);
          })
          .then((AMap) => {
            this.map = new AMap.Map("container", {
              //设置地图容器id
              viewMode: "3D", //是否为3D地图模式
              zoom: 10, //初始化地图级别
              center: [this.lng, this.lat], //初始化地图中心点位置
            });
            // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
            this.map.addControl(new AMap.ToolBar({ position: "LT" }));

            // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
            this.map.addControl(new AMap.Scale());

            // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
            this.map.addControl(new AMap.HawkEye({ isOpen: false }));

            // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
            this.map.addControl(new AMap.MapType());

            // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
            this.map.addControl(
              new AMap.Geolocation({
                position: "LB",
                offset: [20, 60],
              })
            );
            // 添加点标记
            var lat = this.lat;
            var lng = this.lng;
            // console.log(this.lat, "lat");
            var marker = new AMap.Marker({
              position: [lng, lat], //指定标记的经纬度坐标位置
            });
            this.map.add(marker); //添加到地图
          })
          .catch((e) => {
            console.log("e", e);
          });
      }, 1000);
    },
    // 通过首页传递过来的职位id获取数据
    companyintro() {
      this.$api.companyintro(this.jid).then((res) => {
        this.data = res;
        this.lat = Number(res.dataone[0].lat);
        this.lng = Number(res.dataone[0].lng);
        // console.log(this.lat, this.lng);

        // const url = `v1/news/companyintro?j_id=${this.jid}`;
        // this.axios.get(url).then((res) => {
        //   // console.log("细节表", res);
        //   this.data = res.data;
        //   this.lat = Number(res.data.dataone[0].lat);
        //   this.lng = Number(res.data.dataone[0].lng);
        // console.log(this.lat, this.lng);
        // console.log(typeof this.lat);
      });
    },
    getJobdata() {
      this.$api.getJobdata(this.jid).then((res) => {
        this.jobdata = res;
      });
      // const url = "v1/news/ou?jid=" + this.jid;
      // // console.log(this.jid);
      // // console.log(url);
      // this.axios.get(url).then((res) => {
      //   // console.log("根据用户传递过来的ID获取数据", res);
      //   this.jobdata = res.data;
      // });
    },
  },
};
</script>

<style scoped src="../assets/css/Details.css">
</style>
<style >
.con-job .j-left .all .pp__p {
  margin: 10px 10px 10px 0px;
  padding: 10px 10px 10px 0px;
  width: 750px;
  height: 100%;
  font-size: 14px;
}
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 400px;
  border: 1px solid black;
}
</style>